<template>
    <div>
        <div class="filter-container">
            <el-form label-position="left" :inline="true">
                <el-form-item label="渠道类型">
                    <select-app-source-type v-model="search.source_type" :multiple="true"></select-app-source-type>
                </el-form-item>
                <el-form-item label="渠道">
                    <select-app-source v-model="search.source" :type="search.source_type" :multiple="true"></select-app-source>
                </el-form-item>
                <el-form-item label="日期" prop="day">
                    <el-date-picker
                        :clearable="false"
                        v-model="search.day"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期"
                        style="width: 140px;">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="">
                    <el-button class="filter-item" icon="el-icon-search" type="primary" :loading="loading" @click="initSearch()">搜索</el-button>
                    <el-button class="filter-item" @click="exportExcel" v-if="$ENABLE_EXPORT">导出本页</el-button>
<!--                    <el-button class="filter-item" @click="dialogTip = true">数据解析</el-button>-->
                </el-form-item>
            </el-form>
        </div>

        <vxe-table
            :loading="loading"
            ref="xTable"
            highlight-hover-row
            style="width: 100%;"
            show-footer
            keep-source
            align="center"
            :footer-method="footerMethod"
            :max-height="maxHeight">
<!--            <vxe-table-column title="日期" field="day" width="100" fixed="left" sortable sort-by="day"/>-->
            <vxe-table-column title="渠道" field="source" width="60" fixed="left" show-overflow/>
            <vxe-table-column title="账户" field="advertiser_name" min-width="150" align="left" fixed="left"/>
            <vxe-table-colgroup title="激活">
<!--                <vxe-table-column title="后端" field="active_stat" formatter="formatHuman" min-width="60"/>-->
<!--                <vxe-table-column title="重复" field="active_repeat" formatter="formatHuman" min-width="60"/>-->
                <vxe-table-column title="上报" field="active_report" formatter="formatHuman" min-width="60"/>
                <vxe-table-column title="前端" field="active_front" formatter="formatHuman" min-width="60"/>
                <vxe-table-column title="GAP" field="active_gap" formatter="formatPercent" min-width="70"  :class-name="columnClass"/>
            </vxe-table-colgroup>
            <vxe-table-colgroup title="注册人数">
                <vxe-table-column title="后端" field="register_stat" formatter="formatHuman" min-width="60"/>
                <vxe-table-column title="小号" field="register_small_user" formatter="formatHuman" min-width="60"/>
                <vxe-table-column title="空码" field="register_no_uuid_user" formatter="formatHuman" min-width="60" :title-help="{message: '无法获取设备码, 设备码为空'}"/>
                <vxe-table-column title="上报" field="register_report" formatter="formatHuman" min-width="60"/>
                <vxe-table-column title="前端" field="register_front" formatter="formatHuman" min-width="60"/>
                <vxe-table-colgroup title="GAP">
                    <vxe-table-column title="小号" field="register_small_user_gap" formatter="formatPercent" min-width="70"  :class-name="columnClass" :title-help="{message: '前端/(上报-小号)'}"/>
                    <vxe-table-column title="空码" field="register_no_uuid_user_gap" formatter="formatPercent" min-width="70"  :class-name="columnClass" :title-help="{message: '前端/(上报-空码)'}"/>
                </vxe-table-colgroup>
            </vxe-table-colgroup>
            <vxe-table-colgroup title="新增付费人数">
<!--                <vxe-table-colgroup title="后端">-->
<!--                    <vxe-table-column title="当日" field="pay_first_user_stat" formatter="formatHuman" min-width="60"/>-->
                    <vxe-table-column title="后端48h" field="pay_first_user_48h_stat" formatter="formatHuman" min-width="70"/>
<!--                    <vxe-table-column title="30d" field="pay_first_user_30d_stat" formatter="formatHuman" min-width="60"/>-->
<!--                </vxe-table-colgroup>-->
                <vxe-table-column title="前端" field="pay_first_user_front" formatter="formatHuman" min-width="60"/>
                <vxe-table-column title="GAP" field="pay_first_user_gap" formatter="formatPercent" min-width="70" :class-name="columnClass" :title-help="{message: '前端/48H'}"/>
            </vxe-table-colgroup>
            <vxe-table-colgroup title="激活当日付费金额" :title-help="{message: '当日激活的用户在当天产生的付费行为所带来的付费金额'}">
                <vxe-table-column title="后端" field="active_day_pay_stat" formatter="formatHumanRmb" min-width="60" :title-help="{message: '当日激活且付费的数据, 过滤重复激活(要求激活时间<注册时间)'}"/>
                <vxe-table-colgroup title="客户端">
                    <vxe-table-column title="原始" field="active_day_pay_origin" formatter="formatHumanRmb" min-width="60"/>
<!--                    <vxe-table-column title="扣除" field="active_day_pay_reject" formatter="formatHumanRmb" min-width="60"/>-->
                    <vxe-table-column title="上报" field="active_day_pay_report" formatter="formatHumanRmb" min-width="60"/>
                </vxe-table-colgroup>
                <vxe-table-column title="前端" field="active_day_pay_front" formatter="formatHumanRmb" min-width="60"/>
                <vxe-table-column title="小空" field="active_day_pay_stat_small" formatter="formatHumanRmb" min-width="60"/>
                <vxe-table-colgroup title="GAP">
                    <vxe-table-column title="常规" field="active_day_pay_gap" formatter="formatPercent" min-width="70" :class-name="columnClass" :title-help="{message: '前端/实际上报'}"/>
                    <vxe-table-column title="去小空" field="active_day_pay_gap_small" formatter="formatPercent" min-width="70" :class-name="columnClass"/>
                </vxe-table-colgroup>
            </vxe-table-colgroup>
            <vxe-table-colgroup title="激活24H付费金额(回传时间)" :title-help="{message: '当日激活的用户在激活后24小时内产生的付费总金额（回传时间）'}">
                <vxe-table-column title="后端" field="active_24hour_pay_stat" formatter="formatHumanRmb" min-width="60" :title-help="{message: '当日付费且付费时间在激活24小时内的数据, 过滤重复激活(要求激活时间<注册时间)'}"/>
                <vxe-table-colgroup title="客户端">
                    <vxe-table-column title="原始" field="active_24hour_pay_origin" formatter="formatHumanRmb" min-width="60"/>
<!--                    <vxe-table-column title="扣除" field="active_24hour_pay_reject" formatter="formatHumanRmb" min-width="60"/>-->
                    <vxe-table-column title="上报" field="active_24hour_pay_report" formatter="formatHumanRmb" min-width="60"/>
                </vxe-table-colgroup>
                <vxe-table-column title="前端" field="active_24hour_pay_front" formatter="formatHumanRmb" min-width="60"/>
                <vxe-table-column title="小空" field="active_24hour_pay_stat_small" formatter="formatHumanRmb" min-width="60"/>
                <vxe-table-colgroup title="GAP">
                    <vxe-table-column title="常规" field="active_24hour_pay_gap" formatter="formatPercent" min-width="70" :class-name="columnClass" :title-help="{message: '前端/实际上报'}"/>
                    <vxe-table-column title="去小空" field="active_24hour_pay_gap_small" formatter="formatPercent" min-width="70" :class-name="columnClass"/>
                </vxe-table-colgroup>
            </vxe-table-colgroup>
            <vxe-table-colgroup title="付费次数">
                <vxe-table-column title="后端" field="pay_cnt_stat" formatter="formatHuman" min-width="60" :title-help="{message: '当日该渠道所有充值'}"/>
<!--                <vxe-table-column title="扣除" field="pay_cnt_reject" formatter="formatHuman" min-width="60"/>-->
                <vxe-table-column title="上报" field="pay_cnt_report" formatter="formatHuman" min-width="60"/>
                <vxe-table-column title="前端" field="pay_cnt_front" formatter="formatHuman" min-width="60"/>
                <vxe-table-column title="GAP" field="pay_cnt_gap" formatter="formatPercent" min-width="70" :class-name="columnClass"/>
            </vxe-table-colgroup>
            <vxe-table-colgroup title="付费金额">
                <vxe-table-column title="后端" field="pay_stat" formatter="formatHumanRmb" min-width="70" :title-help="{message: '当日该渠道所有充值'}"/>
                <vxe-table-colgroup title="客户端">
                    <vxe-table-column title="原始" field="pay_origin" formatter="formatHumanRmb" min-width="60"/>
<!--                    <vxe-table-column title="扣除" field="pay_reject" formatter="formatHumanRmb" min-width="60"/>-->
                    <vxe-table-column title="上报" field="pay_report" formatter="formatHumanRmb" min-width="60"/>
                </vxe-table-colgroup>
                <vxe-table-column title="前端" field="pay_front" formatter="formatHumanRmb" min-width="60"/>
                <vxe-table-column title="GAP" field="pay_gap" formatter="formatPercent" min-width="70" :class-name="columnClass"/>
            </vxe-table-colgroup>
        </vxe-table>
<!--        <el-dialog title="数据解析" :visible.sync="dialogTip" width="50%">-->
<!--            <el-descriptions class="margin-top" title="字段解析" :column="5" size="mini" border>-->
<!--                <el-descriptions-item>-->
<!--                    <template slot="label">后端</template>-->
<!--                    后台统计数据-->
<!--                </el-descriptions-item>-->
<!--                <el-descriptions-item>-->
<!--                    <template slot="label">原始</template>-->
<!--                   客户端行为日志中的原始订单金额-->
<!--                </el-descriptions-item>-->
<!--                <el-descriptions-item>-->
<!--                    <template slot="label">扣除</template>-->
<!--                    客户端行为日志中的按要求扣除金额-->
<!--                </el-descriptions-item>-->
<!--                <el-descriptions-item>-->
<!--                    <template slot="label">上报</template>-->
<!--                    客户端行为日志中的实际上报金额-->
<!--                </el-descriptions-item>-->
<!--            </el-descriptions>-->
<!--            <el-descriptions class="margin-top" title="差异解析" :column="1" size="mini" border :labelStyle="{'width': '120px'}">-->
<!--                <el-descriptions-item>-->
<!--                    <template slot="label">激活</template>-->
<!--                    用户重装/换渠道包/换手机, 都会导致多次激活事件.-->
<!--                </el-descriptions-item>-->
<!--                <el-descriptions-item>-->
<!--                    <template slot="label">付费</template>-->
<!--                    部分数据依赖客户端行为日志上报, . 另外日志中渠道号为包的渠道号, 可能与用户渠道不一致.-->
<!--                </el-descriptions-item>-->
<!--                <el-descriptions-item>-->
<!--                    <template slot="label">激活付费</template>-->
<!--                    ①后端比原始多: 客户端可能漏传, 或因支付回调延迟导致跨天; <br>②后端比原始少: 原始数据依赖客户端行为日志, 渠道是包的渠道, A渠道用户使用B渠道包产生事件, 会导致此情况-->
<!--                </el-descriptions-item>-->
<!--                <el-descriptions-item>-->
<!--                    <template slot="label">扣除</template>-->
<!--                    按要求扣除金额-->
<!--                </el-descriptions-item>-->
<!--                <el-descriptions-item>-->
<!--                    <template slot="label">上报</template>-->
<!--                    实际上报金额-->
<!--                </el-descriptions-item>-->
<!--            </el-descriptions>-->
<!--        </el-dialog>-->

        <el-alert
            type="info"
            :closable="false"
            show-icon>
            <p>
                数据分三部分:
                <span>①后端统计</span> <el-divider direction="vertical"></el-divider>
                <span>②客户端上报</span> <el-divider direction="vertical"></el-divider>
                <span>③前端汇总</span>
            </p>
            <p>
                前端差异:
                <span>无法获取设备码, 导致后续无法归因</span> <el-divider direction="vertical"></el-divider>
                <span>小号行为</span> <el-divider direction="vertical"></el-divider>
<!--                <span>客户端断线上报失败</span> <el-divider direction="vertical"></el-divider>-->
                <span>用户更换渠道包</span>
            </p>
            <p>
                后端与客户端差异:
                <span>用户更换渠道包</span> <el-divider direction="vertical"></el-divider>
                <span>客户端断线上报失败</span>
            </p>
            <p>
                小号空号, 简称小空. 仅用作参考, 小号与大号注册时间差异会影响到部分数据. 空号也可能只是我方未获取到设备码, 但媒体正常获取.
            </p>
        </el-alert>
    </div>
</template>

<script>
import SelectAppSourceType from '~/components/Select/app-source-type';

export default {
    components: {
        SelectAppSourceType,
    },
    data() {
        return {
            search: {
                source: '',
                source_type: [],
                day: '',
            },
            loading: false,
            selected: [],
            tableData: [],
            pageNo: 1,
            pageSize: 20,
            totalDataNumber: 0,
            pageOptions: this.$store.state.backend.pageOptions,
            pageCount: 0,
            // dialogTip: true,
        }
    },
    computed: {
        maxHeight() {
            return this.$store.state.backend.windowInnerHeight - 220;
        },
    },
    methods: {
        handleSizeChange(val) {
            this.pageNo = 1;
            this.pageSize = parseInt(`${val}`);
            this.handleSearch();
        },
        handleCurrentChange(val) {
            this.pageNo = parseInt(`${val}`);
            this.handleSearch();
        },
        handleSelectionChange(val) {
            this.selected = val;
        },
        handleSearch() {
            this.loading = true;
            let filter = Object.assign({}, this.search, {
                page: this.pageNo,
                pageSize: this.pageSize,
            });
            this.$store.dispatch('spreadData/MarketReportStat', filter).then(({data}) => {
                this.$refs.xTable.reloadData(data)
            }).finally(() => {
                this.loading = false;
            });
        },
        initData() {
            this.initSearchDate();
            this.handleSearch();
        },
        initSearchDate() {
            this.search.day = moment().format('yyyy-MM-DD');
        },
        initSearch() {
            this.pageNo = 1;
            this.handleSearch();
        },
        exportExcel () {
            this.$refs.xTable.exportData({
                filename: '推广数据-' + this.$route.meta.title,
                type: 'xlsx'
            })
        },
        footerMethod({columns, data}) {
            return this.$helper.vxeFooter(columns, data, (index, property) => {
                return index < 2;
            }, (sums, allFields) => {
                sums[allFields.active_gap] = this.$helper.calcDivision(sums[allFields.active_front], sums[allFields.active_report]);
                sums[allFields.register_small_user_gap] = this.$helper.calcDivision(sums[allFields.register_front], sums[allFields.register_report] - sums[allFields.register_small_user]);
                sums[allFields.register_no_uuid_user_gap] = this.$helper.calcDivision(sums[allFields.register_front], sums[allFields.register_report] - sums[allFields.register_no_uuid_user]);
                sums[allFields.pay_cnt_gap] = this.$helper.calcDivision(sums[allFields.pay_cnt_front], sums[allFields.pay_cnt_report]);
                sums[allFields.pay_gap] = this.$helper.calcDivision(sums[allFields.pay_front], sums[allFields.pay_report]);
                sums[allFields.pay_first_user_gap] = this.$helper.calcDivision(sums[allFields.pay_first_user_front], sums[allFields.pay_first_user_48h_stat]);
                sums[allFields.active_day_pay_gap] = this.$helper.calcDivision(sums[allFields.active_day_pay_front], sums[allFields.active_day_pay_report]);
                sums[allFields.active_24hour_pay_gap] = this.$helper.calcDivision(sums[allFields.active_24hour_pay_front], sums[allFields.active_24hour_pay_report]);
                sums[allFields.active_day_pay_gap_small] = this.$helper.calcDivision(sums[allFields.active_day_pay_front], sums[allFields.active_day_pay_report]-sums[allFields.active_day_pay_stat_small]);
                sums[allFields.active_24hour_pay_gap_small] = this.$helper.calcDivision(sums[allFields.active_24hour_pay_front], sums[allFields.active_24hour_pay_report]-sums[allFields.active_24hour_pay_stat_small]);
                return sums;
            });
        },
        columnClass({row, column}) {
            let val = row[column.field];
            if (!val) return '';
            if (val < 0.85 || val > 1) return 'color-danger';
            return 'color-success';
        },
    },
    created() {
        this.initData();
    }
}
</script>

<style lang="scss" scoped>
#app .el-form-item {
    margin-bottom: 0;
}
</style>

